<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org"
	xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>【顺风车】 - 资料编辑</title>
<link rel="stylesheet" href="../../static/assets/css/amazeui.css" th:href="@{/assets/css/amazeui.min.css}" />
<link rel="stylesheet" href="../../static/assets/css/common.min.css" th:href="@{/assets/css/common.min.css}" />
<link rel="stylesheet" href="../../static/assets/css/amaze.min.css" th:href="@{/assets/css/amaze.min.css}" />
<link rel="stylesheet" href="../../static/assets/css/other.min.css" th:href="@{/assets/css/other.min.css}" />
<link rel="stylesheet" href="../../static/assets/css/app2.css" th:href="@{/assets/css/app2.css}" />
<link rel="stylesheet" href="../../static/assets/cropbox/cropbox.css" th:href="@{/assets/cropbox/cropbox.css}" />
</head>
<body class="register-container">
	<div class="layout">
		<div th:include="common/header::header"></div>

		<br />
		<!--===========layout-container================-->
		<div class="am-container" style="background: #fff;">

			<div class="tpl-page-container tpl-page-header-fixed">

				<div th:include="common/nav::nav"></div>

				<div class="tpl-content-wrapper">

					<div class="row">
						<div class="tpl-portlet">
							<div class="tpl-portlet-title">
								<div class="tpl-caption font-green ">
									<span>资料编辑</span>
								</div>
							</div>

							<div class="am-tabs tpl-index-tabs" data-am-tabs="">
								<ul class="am-tabs-nav am-nav am-nav-tabs">
									<li class="am-active">
										<a href="#tab1">我的头像</a>
									</li>
									<li>
										<a href="#tab2">我的资料</a>
									</li>
								</ul>

								<div class="am-tabs-bd">
									<div class="am-tab-panel am-fade am-in am-active" id="tab1">
										<div class="container">

											<div class="imageBox">

												<div class="thumbBox"></div>

												<div class="spinner" style="display: none"></div>

											</div>

											<div class="action">

												<!-- <input type="file" id="file" style=" width: 200px">-->

												<div class="new-contentarea tc">
													<a href="javascript:void(0)" class="upload-img">

														<label for="upload-file">请先选择图片...</label>

													</a>

													<input type="file" class="" name="upload-file" id="upload-file" />

												</div>

												<input type="button" id="btnCrop" class="Btnsty_peyton" value="OK" />

												<input type="button" id="btnZoomIn" class="Btnsty_peyton" value="+" />

												<input type="button" id="btnZoomOut" class="Btnsty_peyton" value="-" />

											</div>

											<div class="cropped"></div>

										</div>
									</div>
									<div class="am-tab-panel am-fade" id="tab2">
										<form action="/front/edit/save" method="post" class="am-form am-form-horizontal" data-am-validator="">
											<div class="am-form-group">
												<label class="am-u-md-2 am-form-label am-padding-0">真实姓名：</label>
												<div class="am-u-md-6 am-u-end">
													<input type="text" class="am-form-field am-radius" placeholder=" 真实姓名" th:value="${user.realName}"
														disabled="" />
												</div>
											</div>
											<div class="am-form-group">
												<label class="am-u-md-2 am-form-label am-padding-0">手机号码：</label>
												<div class="am-u-md-6 am-u-end">
													<input type="text" class="am-form-field am-radius" name="phone" maxlength="11" placeholder=" 手机号码"
														th:value="${user.passenger}?${user.passenger.phone}" />
												</div>
											</div>
											<div class="am-form-group">
												<label class="am-u-md-2 am-form-label am-padding-0">QQ：</label>
												<div class="am-u-md-6 am-u-end">
													<input type="text" class="am-form-field am-radius" name="qq" maxlength="20" placeholder=" QQ"
														th:value="${user.passenger}?${user.passenger.qq}" />
												</div>
											</div>
											<div class="am-form-group">
												<label class="am-u-md-2 am-form-label am-padding-0">微信：</label>
												<div class="am-u-md-6 am-u-end">
													<input type="text" class="am-form-field am-radius" name="wx" maxlength="20" placeholder=" 微信"
														th:value="${user.passenger}?${user.passenger.wx}" />
												</div>
											</div>
											<div class="am-form-group">
												<div class="am-u-md-6 am-u-md-offset-2">
													<button type="submit" class="am-btn am-btn-secondary am-btn-block">提交</button>
												</div>
											</div>
										</form>
									</div>

								</div>
							</div>

						</div>
					</div>

				</div>

			</div>

		</div>
	</div>
	<br />

	<div th:include="common/footer::footer"></div>

	<script src="../../static/assets/js/jquery-2.1.0.js" charset="utf-8" th:src="@{/assets/js/jquery-2.1.0.js}"></script>
	<script src="../../static/assets/js/amazeui.js" charset="utf-8" th:src="@{/assets/js/amazeui.js}"></script>
	<script src="../../static/assets/cropbox/cropbox-min.js" charset="utf-8" th:src="@{/assets/cropbox/cropbox-min.js}"></script>
</body>
<script th:inline="javascript">
	$(window).load(
			function() {
				var options = {
					thumbBox : '.thumbBox',
					spinner : '.spinner',
					imgSrc : ''
				}
				var cropper = $('.imageBox').cropbox(options);
				var img = "";
				$('#upload-file').on('change', function() {
					var reader = new FileReader();
					reader.onload = function(e) {
						options.imgSrc = e.target.result;
						cropper = $('.imageBox').cropbox(options);
						getImg();
					}
					reader.readAsDataURL(this.files[0]);
					//this.files = [];
					//getImg();
				})
				$('#btnCrop').on('click', function() {
					$.ajax({
						type : 'post',
						url : [[@{/front/image/uploadImg}]],
						dataType : 'json',
						data : {
							"imgStr" : cropper.getDataURL()
						},
						success : function(result) {
							if (result.code === 100) {
								alert("上传失败");
							}
							window.location.reload();
						}
					});
				})
				function getImg() {
					img = cropper.getDataURL();
					$('.cropped').html('');
					$('.cropped').append(
							'<img src="'+img+'" align="absmiddle" style="width:180px;margin-top:4px;border-radius:180px;box-shadow:0px 0px 12px #7E7E7E;"/><p>180px*180px</p>');
					$('.cropped').append(
							'<img src="'+img+'" align="absmiddle" style="width:128px;margin-top:4px;border-radius:128px;box-shadow:0px 0px 12px #7E7E7E;"/><p>128px*128px</p>');
					$('.cropped').append(
							'<img src="'+img+'" align="absmiddle" style="width:64px;margin-top:4px;border-radius:64px;box-shadow:0px 0px 12px #7E7E7E;"/><p>64px*64px</p>');
				}
				$(".imageBox").on("mouseup", function() {
					getImg();
				});

				$('#btnZoomIn').on('click', function() {
					cropper.zoomIn();
				})
				$('#btnZoomOut').on('click', function() {
					cropper.zoomOut();
				})
			});
</script>

</html>
